<template>
	<view class="search-outer-wrapper">
		<div class="fixed">
			<div class="search-wrapper">
				<div class="type-change" @click="showTypeChoose">
					<span>{{typeSelect}}</span>
					<u-icon v-if="typeShow" name="arrow-up" size="24" color="#999"></u-icon>
					<u-icon v-else name="arrow-down" size="24" color="#999"></u-icon>
				</div>
				<u-search class="search" v-model="keyword" :show-action="false" bg-color="#ffffff"
					@search="doSearch(faslse)" placeholder="搜索店铺" style='width: 100%;'></u-search>
			</div>
			<div class="type-choose" @click="hideTypeChoose" v-if="typeShow">
				<div class="content-box" @click.stop>
					<div class="item" @click="chooseType('商品',keyword)">商品</div>
					<div class="item" @click="chooseType('店铺',keyword)">店铺</div>
				</div>
			</div>
			<view class="navbar-wrapper">
				<view class="nav-item" :class="{ current: filterIndex === 4 }" @click="regionClick(4,true)">
					<text class="name">{{name}}</text>
					<view class="p-box">
						<u-icon size="13" name="play-right-fill" class="down"
							:color="filterIndex === 4 ?'#e63214':'#999999'"></u-icon>
					</view>
				</view>
				<view class="nav-item" :class="{ current: filterIndex === 3 }" @click="tabClick(3, '销量',false)">
					<text class="name">按销量</text>
					<view class="p-box">
						<u-icon size="13" name="play-right-fill" class="down"
							:color="params.type === '销量' && params.order === 'desc'?'#e63214':'#999999'"></u-icon>
					</view>
				</view>

				<view class="nav-item" :class="{ current: filterIndex === 6 }" @click="tabClick(6, '评分',false)">
					<text class="name">按评分</text>
					<view class="p-box">
						<u-icon size="13" name="play-right-fill" class="down"
							:color="params.type === '评分' && params.order === 'desc'?'#e63214':'#999999'"></u-icon>
					</view>
				</view>
			</view>
		</div>
		<!-- 全城 -->
		<view v-if="isRegion" class="content">
			<scroll-view scroll-y scroll-with-animation class="left-aside">
				<view class="f-item" :class="{ active: index ==tabOne }" @click="nearby(0)">
					附近
				</view>
				<view v-for="(item, index) in tabList" :key="item.id" class="f-item"
					:class="{ active: index+1==tabOne }" @click="areaSearch(item, index,false)">
					{{ item.name }}
				</view>
			</scroll-view>
			<scroll-view v-if="meterShow" scroll-with-animation scroll-y class="right-aside" :upper-threshold="-100"
				:lower-threshold="-100">
				<view class="t-list category-list">
					<!--  附近千米 -->
					<view v-for="(item, index) in categoryList" :key="item.id" class="b-b"
						:class="{ active: index==tabTwo }" @click="nearbyMeter(item, index,false)">
						{{ item.id==0?item.name: item.name+'km'}}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 搜索 -->
		<view v-else class="goods-content">
			<div v-if="goodsList===''">
				<u-loadmore bg-color="transparent" status="loading" icon-type="flower" />
			</div>
			<div v-else-if="goodsList.length==0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</div>
			<div v-else>
				<view class="scoll-page">
					<view class="goods-list">
						<view v-for="(item, index) in goodsList" :key="index" class="goods-item"
							@click="navigateToshop(item)">
							<view class="image-wrapper">
								<image class="image" :src="item.storeLogo" mode="aspectFill"></image>
							</view>
							<view class="goods-detail ">
								<div class="title text-hidden">
									{{ item.storeName }}
								</div>
								<div class='site'>
									{{item.storeAddressPath}}{{ item.storeAddressDetail}}
								</div>
								<div class='evaluate'>
									<span class='grade' style='font-size: 32rpx;'>{{item.score || 0.0}}分</span>
									<span class='sales'>
										月售 {{item.monthSales || 0}}+
									</span>
									<div class="empty"></div>
									<div class='distance'>
										<u-icon name="map-fill" color="rgba(36, 36, 36, 1)" size="28"></u-icon>
										<span>{{item.distance<1000 ? `${item.distance}m`: `${Number(item.distance/1000).toFixed(2)}km` }}</span>
									</div>
								</div>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</view>
			</div>
		</view>
	</view>
</template>


<script>
	import {
		getGoodsList,
		getGoodsRelated,
		getShopList,
		getRegionList,
	} from "@/api/goods.js";

	import {
		getHotKeywords
	} from "@/api/home.js";
	import storage from "@/utils/storage";
	export default {
		data() {
			return {
				typeShow: false,
				typeSelect: '店铺', // 查询类型  商品还是店铺
				name: '全城', //位置
				categoryList: [{
						name: "全城",
						id: 0
					},
					{
						name: "1",
						id: 1
					},
					{
						name: "3",
						id: 3
					},
					{
						name: "5",
						id: 5
					},
					{
						name: "10",
						id: 10
					}
				],
				meterShow: true, //距离米显示
				index: '',
				tabList: [], //全城
				tabOne: 0, //地区高亮
				tabTwo: 0,
				isRegion: false,
				keyword: "",
				goodsList: [],
				loadingType: "loading", //加载更多状态
				filterIndex: 0,
				params: {
					pageNumber: 1,
					pageSize: 10,
					keyword: "",
				},
				sortParams: {
					pageNumber: 1,
					pageSize: 10,
					categoryId: "",
				},
			};
		},
		onLoad(options) {
			if (options.keyword) {
				this.keyword = options.keyword
				this.params.keyword = options.keyword
			}
			if (options.category) {
				this.params.categoryId = options.category;
				this.sortParams.categoryId = options.category;
				uni.setNavigationBarTitle({
					title: options.name
				})
			} else {
				uni.setNavigationBarTitle({
					title: '搜索店铺'
				})
			}
			this.loadData("refresh", 1);
		},
		onReachBottom() {
			this.params.pageNumber++;
			this.loadData();
		},
		methods: {
			showTypeChoose() {
				this.typeShow = true
			},
			hideTypeChoose() {
				this.typeShow = false
			},
			chooseType(type, keyword) {
				// this.typeSelect = type
				// this.$emit("typeChange", type)
				this.hideTypeChoose()
				if (type == '商品') {
					uni.redirectTo({
						url: `/pages/search/goods?keyword=${keyword}`,
					});
				}
			},
			//地区搜索
			areaSearch(item, i, bool) {
				this.tabOne = i + 1
				this.meterShow = false
				this.isRegion = bool
				this.name = item.name
				//调接口
				this.initParams()
				this.$set(this.params, "adcode1", item.adCode);
				if (i == 0) {
					// this.params.sort = "releaseTime";
					this.params.order = "desc";
				}
				this.loadData("refresh", 1);
			},
			//附近千米搜索
			nearbyMeter(item, i, bool) {
				this.tabTwo = i
				this.isRegion = bool
				this.initParams()
				this.$set(this.params, "distance", item.id * 1000);
				this.$set(this.params, "adcode1", "");
				if (item.id == 0) {
					this.name = item.name
				}
				if (i == 0) {
					// this.params.sort = "releaseTime";
					this.params.order = "desc";
				}
				this.loadData("refresh", 1);
			},
			nearby(i) {
				this.tabOne = i
				this.index = i
				this.meterShow = true
			},
			regionClick(index, bool) {
				this.filterIndex = index;
				this.isRegion = bool
				getRegionList().then(res => {
					if (res.data && res.data.success) {
						this.tabList = res.data.result
					}
				})
			},
			initParams() {
				this.loadingType = "loading"
				this.goodsList = ''
				this.params.pageNumber = 1;
				this.params.pageSize = 10;
			},
			// 格式化金钱  1999 --> [1999,00]
			formatPrice(val) {
				if (typeof val == "undefined" || !val) {
					return val;
				}
				return val.toFixed(2).split(".");
			},
			// 跳转到商品详情
			navigateToDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/goods?id=${item.skuList[0].id}&goodsId=${item.id}`,
				});
			},
			// 跳转到店铺
			navigateToshop(item) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${item.id}`,
				})
			},
			// 跳转地址
			navigateToStoreDetailPage(item) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${item.storeId}`,
				});
			},
			tabClick(index, type, bool) {
				this.isRegion = bool
				this.initParams()
				this.params.order = "desc"
				this.$set(this.params, "type", type);


				if (index == 0) {
					// this.params.sort = "releaseTime";
					this.params.order = "desc";
				}

				this.filterIndex = index;
				this.loadData("refresh", 1);
				// uni.showLoading({
				// 	title: "正在加载",
				// });
			},
			/**
			 * 加载热门搜索
			 * 1.5分钟之后更新缓存
			 * 2.如果有缓存热门关键字则去请求缓存
			 */
			async loadHotKeyword() {
				this.hotKeywordList = [];
				if (
					!storage.getHotWords().time ||
					storage.getHotWords().time <= new Date().getTime() / 1000
				) {
					// 没有缓存或者第一次进入请求接口保存缓存
					let res = await getHotKeywords(10);
					let keywords = res.data.result;

					keywords.forEach((item) => {
						this.hotKeywordList.push(item);
					});

					let hotData = {
						time: new Date().getTime() / 1000 + 30 * 5,
						keywords: keywords,
					};
					storage.setHotWords(hotData);
				} else {
					let keywords = storage.getHotWords().keywords;

					keywords.forEach((item) => {
						this.hotKeywordList.push(item);
					});
				}
			},
			//加载商品 ，带下拉刷新和上滑加载
			async loadData(type, loading) {
				if (type === "refresh") {
					this.initParams()
				}
				if (this.loadingType === "noMore") return
				let goodsList = await getShopList({
					...this.params,
					orderBySort: true,
					storeName: this.params.keyword,
					categoryThird: this.params.categoryId,
					state: 1
				});
				let list = goodsList.data.result.records
				this.afterList(list)
			},
			afterList(list) {
				if (this.goodsList === '') {
					this.goodsList = []
				}
				if (list.length < 10) {
					this.loadingType = "noMore";
				}
				this.goodsList = this.goodsList.concat(list);
			},
			/**
			 * 执行搜索
			 */
			doSearch(keyword) {
				this.params.keyword = this.keyword;
				this.$set(this.sortParams, "keyword", keyword);
				this.loadData("refresh", 1);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.search-outer-wrapper {
		padding-top: 180upx;
		padding-bottom: 32upx;

		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
			background-color: rgba(240, 243, 248, 1);

			.type-choose {
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				background-color: transparent;
				z-index: 99;

				.content-box {
					position: fixed;
					top: 85upx;
					left: 33upx;
					width: 190upx;
					background-color: #333;
					z-index: 100;
					border-radius: 12upx;

					&::before {
						content: " ";
						position: absolute;
						top: -8upx;
						left: 80upx;
						width: 20upx;
						height: 20upx;
						transform: rotate(45deg);
						background-color: #333;
					}

					.item {
						height: 100upx;
						line-height: 100upx;
						color: #fff;
						border-bottom: 2upx solid #444;
						text-align: center;

						&:last-child {
							border: none;
						}
					}
				}
			}
		}

		.search-wrapper {
			padding: 20upx 24upx;
			display: flex;

			.type-change {
				padding: 0 24upx;
				flex: 0 0 140upx;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		.navbar-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 60rpx;
			z-index: 10;

			.nav-item {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 26rpx;
				color: #242424;
				position: relative;

				.p-box {
					height: 36upx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.top {
						transform: rotate(-90deg);
					}

					.down {
						transform: rotate(90deg);
					}
				}

				.name {
					margin-right: 8upx;
				}
			}

			.current {
				color: #e63214;
				position: relative;
			}
		}
	}

	.search-outer-wrapper {
		.content {
			height: calc(100vh - 128upx);
			display: flex;
			color: #333;
			font-size: 28rpx;
			background: #fff;
		}

		.left-aside {
			flex-shrink: 0;
			width: 200rpx;
			height: 100%;
			background-color: #f7f7f7;
		}

		.f-item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 97rpx;
			position: relative;

			&.active {
				font-weight: bold;
				color: $light-color;
				background: #fff;
			}
		}

		.b-b {
			margin-left: 68rpx;
			width: 100%;
			height: 97rpx;
			position: relative;

			&.active {
				font-weight: bold;
				color: $light-color;
				background: #fff;
			}
		}

		.right-aside {
			flex: 1;
			overflow: hidden;
			padding: 40rpx 0 140upx 30rpx;
		}

		.top-img {
			width: 500rpx;
			height: 230rpx;
			border-radius: 8px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.s-item {
			display: flex;
			align-items: center;
			height: 70rpx;
			padding-top: 16rpx;
			font-weight: 500;
		}

		.t-list {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			padding-top: 12rpx;
		}

		.margin-right {
			margin-right: 0 !important;
		}

		.t-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 150rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
			padding-bottom: 20rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 8px;
				margin-bottom: 20rpx;
			}

			/deep/ .u-image {
				width: 140rpx !important;
				height: 140rpx !important;
				border-radius: 8px !important;
				margin-bottom: 20rpx !important;
			}
		}

		.goods-list {
			justify-content: space-between;
			padding: 0 24upx 32upx 24upx;
			width: 100%;

			.goods-item {
				background-color: #ffffff;
				display: flex;
				border-radius: 24rpx;
				margin-bottom: 20rpx;
				padding: 16rpx;

				.image-wrapper {
					flex: 0 0 200upx;
					padding: 0;
					margin-right: 12upx;

					.image {
						width: 200upx;
						height: 200upx;
						border-radius: 12upx;
					}
				}

				.goods-detail {
					flex: 1;
					width: 0;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 28upx;
						height: 60rpx;
						padding: 10rpx 0 0;
						display: -webkit-box;
						color: rgba(36, 36, 36, 1);
					}

					.sit {
						color: rgba(173, 170, 170, 1);
						font-size: 24upx;
					}

					.evaluate {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.grade {
							color: rgba(255, 137, 33, 1);
							font-size: 26upx;
							margin-right: 16upx;
						}

						.sales {
							color: rgba(173, 170, 170, 1);
							font-size: 24upx;
						}

						.empty {
							flex: 1;
						}
					}
				}
			}

			.text-hidden {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

		}
	}
</style>
